<template>
	<!-- 新增收货地址页 -->
	<view class="update_address">
		<!-- 表单 -->
		<view class="form">
			<u--form labelPosition="left" :model="formData" labelWidth="80" :rules="rules" ref="uForm">
				<u-form-item label="姓名" prop="name" borderBottom>
					<u--input v-model="formData.name" placeholder="收货人姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="电话" prop="phone" borderBottom>
					<u--input v-model="formData.phone" placeholder="收货人手机号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="地区" prop="area_name" :customStyle="{padding: '2rpx 0'}" borderBottom>
					<u-cell-group :border="false">
						<u-cell :border="false" :title="areaText" @click="chooseAddr" isLink
							:titleStyle="{color: areaTextColor}"></u-cell>
					</u-cell-group>
				</u-form-item>
				<u-form-item label="详细地址" prop="desc">
					<u--input v-model="formData.desc" placeholder="街道门牌、楼层房间号等信息" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- 设置为默认值 -->
		<view class="setDefault">
			<u-cell-group :border="false">
				<u-cell title="设为默认收货地址" :border="false">
					<template #value>
						<u-switch v-model="isDefault" @change="changeDefault"></u-switch>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 保存按钮 -->
		<view class="Button">
			<u-button text="保存" color="#ff516b" shape="circle" @click="onSave"></u-button>
		</view>
		<!-- 删除按钮 -->
		<view class="Button deleteBtn" v-if="id!==null">
			<u-button text="删除" color="#fff" shape="circle" @click="onDelete"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'update_address',
		data() {
			return {
				// 表单校验规则
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写收货人姓名'
					},
					phone: [{
						pattern: /^1(3|4|7|5|8)([0-9]{9})/,
						transform(value) {
							return String(value);
						},
						message: '手机格式不正确'
					}, {
						len: 11,
						message: '手机格式不正确'
					}, {
						type: 'string',
						required: true,
						message: '请填写收货人手机号'
					}],
					area_name: {
						type: 'string',
						required: true,
						message: '请选择地区'
					},
					desc: {
						type: 'string',
						required: true,
						message: '请填写详细地址'
					}
				},
				// 表单数据
				formData: {
					name: '', // 收货人
					phone: '', // 手机号码
					area_name: '', // 地区地址的中文
					desc: '', // 详细地址
				},
				// 是否作为默认地址
				isDefault: false,
				// 用户收货地址id（可以作为是否编辑页的判据，保存传递过来的商品地址id）
				id: null
			}
		},
		computed: {
			// 地址输入框文字颜色
			areaTextColor() {
				return this.formData.area_name ? '#303133' : ' #c0c4cc';
			},
			// 地址输入框文字
			areaText() {
				return this.formData.area_name || '点击选择';
			},
		},
		methods: {
			// 默认开关改变
			changeDefault(value) {
				// 默认值设置
				this.isDefault = value;
			},
			// 调出微信选择地址页
			chooseAddr() {
				uni.chooseLocation({
					success: (res) => {
						// 保存选中地址信息
						this.formData.area_name = res.name;
					}
				});
			},
			// 保存地址信息(保存按钮)
			onSave() {
				// 表单校验
				this.$refs.uForm.validate().then(async res => {
					// 地址id
					let id = null;
					// 添加收货地址
					if (this.id) {
						id = this.id;
						// 作为编辑页，更新地址信息
						await this.updateAddress(id, this.formData);
					} else {
						// 作为新增页，添加地址信息
						id = await this.addAddress(this.formData);
					}
					// console.log(id);
					if (this.isDefault) {
						// 如果设置为默认值，设置为默认收货地址
						await this.setDefaultAddress(id);
					}
					// 返回上一个页面(延迟跳转)
					let timer = setTimeout(() => {
						this.$Router.back();
						clearTimeout(timer);
					}, 500);
				}).catch(errors => {
					// console.log(errors);
					// 校验不通过，弹出提示信息
					uni.$u.toast('请填写完整信息')
				})
			},
			// 删除地址信息（删除按钮）
			onDelete() {
				uni.showModal({
					content: '是否删除该地址',
					success: async (res) => {
						if (res.confirm) {
							let data = await this.deleteAddress(this.id);
							// 返回上一个页面(延迟跳转)
							let timer = setTimeout(() => {
								this.$Router.back();
								clearTimeout(timer);
							}, 500);
						}
					}
				})
			},
			// 添加用户收货地址
			async addAddress(data) {
				let res = await this.$api.address.addAddressAPI(data);
				// 返回地址id
				return res.result.id;
			},
			// 设置默认收货地址
			async setDefaultAddress(id) {
				let data = await this.$api.address.setDefaultAddressAPI(id);
			},
			// 更新收货地址信息
			async updateAddress(id, data) {
				let res = await this.$api.address.updateAddressAPI(id, data);
			},
			// 删除收货地址
			async deleteAddress(id) {
				let data = await this.$api.address.deleteAddressAPI(id);
			},
			// 根据地址id获取用户收货地址信息
			async getAddrById(id) {
				let data = await this.$api.address.getAddressByIdAPI(id);
				// 保存数据
				this.formData.name = data.result.name;
				this.formData.phone = data.result.phone;
				this.formData.area_name = data.result.area_name;
				this.formData.desc = data.result.desc;
				// 如果是默认地址，标记为默认地址
				data.result.default_set == 0 && (this.isDefault = true);
			}
		},
		onReady() {
			// 导航栏标题
			let title = '新增地址';
			// 添加表单规则（微信小程序）
			this.$refs.uForm.setRules(this.rules);

			// 保存传递过来的地址id
			this.id = this.$Route.query.id || null;
			// 如果id存在，表示作为编辑页
			if (this.id !== null) {
				title = '编辑地址';
				// 根据地址id获取地址信息
				this.getAddrById(this.id);
			}
			// 修改导航栏标题
			uni.setNavigationBarTitle({
				title
			});
		},
	}
</script>

<style lang="scss" scoped>
	.update_address {
		@include page-bgc(#e9ecf0);
		padding-top: 20rpx;

		// 表单
		.form {
			@include whiteCard();
			padding: 0 30rpx;

			::v-deep .u-cell__body {
				padding-left: 0 !important;
			}
		}

		// 设置为默认值
		.setDefault {
			@include whiteCard();
			padding-right: 30rpx;
		}

		// 按钮
		.Button {
			margin-top: 80rpx;
			width: 100%;
			height: 80rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			// 删除按钮
			&.deleteBtn {
				margin-top: 28rpx;

				::v-deep .u-button__text {
					color: #000;
				}
			}
		}
	}
</style>